<template>
  <div class="container">
    <ant-search></ant-search>
    <div class="sorting">
      <div class="sorting-item" :class="{active:order==0}" @click="changeOrder(0)">综合排序</div>
      <div class="sorting-item" :class="{active:order==1}" @click="changeOrder(1)">距离</div>
      <div class="sorting-item" :class="{active:order==2}" @click="changeOrder(2)">信用评价</div>
      <div class="sorting-item" :class="{active:order==3}" @click="changeOrder(3)">销量</div>
    </div>
    <div class="store-list" v-if="list">
      <ant-store v-for="(item,index) in list" :key="index" :data="item"></ant-store>
    </div>
    <i-load-more v-if="!list&&isLoadEnd" :tip="'暂无数据'" :loading="loading" />
    <i-load-more v-if="!isLoadEnd" :tip="'加载更多数据'" :loading="loading" />
    <i-load-more v-if="list&&isLoadEnd" :tip="'没有更多数据了'" :loading="loading" />
  </div>
</template>
<script>

  import {
    mapState,
    mapMutations
  } from "Vuex";
  // 依赖
  import request from "@/api/request";
  import AntStore from "@/components/store";
  import AntSearch from '@/components/search'
  import {
    getMallCollect,
    cancelCollect
  } from "@/utils/index";
  export default {
    data() {
      return {
        active: 0,
        order: 0,
        page: 1,
        list: null,
        loading: true,
        isLoadEnd: false

      }
    },
    components: {
      AntStore,
      AntSearch
    },
    computed: {
      ...mapState(['mallList', 'mallActive', 'classificationActive', 'locationInfo'])
    },
    methods: {
      ...mapMutations(['setMallList', 'setMallActive']),
      getMallStoreList() {
        const {
          cate_id,
          type,
          keywords
        } = this.$route.query
        let option = {
          order: this.order,
          keywords,
          longitude: this.locationInfo.location.lng,
          latitude: this.locationInfo.location.lat,
          page: this.page,
        }
        if (cate_id) {
          option.cate_id = cate_id
        }
        this.loading = true
        request.getMallStoreList(option).then(res => {
          if (res.data.list.length < 20) {
            this.isLoadEnd = true
          }
          if (this.list) {
            this.list = this.list.concat(res.data.list)
          } else {
            this.list = res.data.list
          }
          this.loading = false
          console.log(this.list, 1222222)
        })
      },
      changeOrder(val) {
        this.page = 1
        this.order = val
        this.list = null
        this.isLoadEnd = false
        this.getMallStoreList()
      },
      cancelCollect(data) {
        cancelCollect({
          goods_id: data.goods_id
        }).then(() => {
          this.getProductList()
        })
      },
      getMallCollect(data) {
        getMallCollect({
          goods_id: data.goods_id
        }).then(() => {
          this.getProductList()
        })
      },
    },
    onReachBottom() {
      this.page++;
      this.getMallStoreList();
    },
    mounted() {
      console.log("请求数据")
      // this.getMallList()
      this.list = null
      this.getMallStoreList()
    },
  }

</script>

<style lang="less">
  .container {
    flex: 1;
    display: flex;
    flex-direction: column;
  }


  .sorting {
    display: flex;
    background: #fff;
    border-bottom: 1rpx solid #F9F9F9;

    .sorting-item {
      flex: 1;
      font-size: 14px;
      color: rgba(160, 160, 160, 1);
      text-align: center;
      padding: 15px;
    }

    .active {
      color: #EE7559;
    }
  }

</style>
